<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://webfuture.cn/xhcms_2014/js/jquery-form/form-valid.min.js"></script>
<style>
	#form-content{
		width: 840px;
		background: #fff;
		margin: 30px auto;
	}
	#form-content .fm-item{
		line-height: 30px;
		padding-left: 150px;
		height: 30px;
		overflow: visible;
		position: relative;
	}
	#form-content .fm-item .i-label{
		display: block;
		position: absolute;
		top:0;
		left: 0;
		width: 150px;
		height: 30px;
		text-align: right;
	}
	#form-content .fm-item .i-text{
		width: 170px;
	}

	#form-content .fm-item .i-radio{
		margin-left: 10px;
	}


	.tip-error{
		font-size: 12px;
		padding-left: 8px;
		color: #c00;
	}
	.tip-default{
		font-size: 12px;
		padding-left: 8px;
		color: #666;
	}
	.title{
		text-align: center;
		line-height: 60px;
		font-family: 'Microsoft Yahei';
	}
</style>
</head>
<body>
	
	<div id="form-content">
		<h4 class="title">应用中需要重写settings：通过识别errorInfo这个字符串是否为"" 决定验证成功与否</h4>
 		<form id="form0">
 			<div class="fm-item">
 				<label class="i-label">申请金额：</label>
 				<input class="i-text" data-validater='{"required":true}' data-xxx="{required:true}" name="amount" id="amount" title="金额">
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<label class="i-label">姓名：</label>
 				<input class="i-text" name="name" id="name" >
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<label class="i-label">身份证：</label>
 				<input class="i-text" name="idCard" id="idCard" >
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<label class="i-label">出生日期：</label>
 				<input class="i-text" name="birth" id="birth" title="日期">
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<label class="i-label">备注：</label>
 				<input class="i-text" name="info" id="info">
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<label class="i-label">爱好：</label>
 				<span class="hobby-holder">
	 				<input type="checkbox" name="hobby" id="hobby1" value="1"><label for="hobby1">唱歌</label>
	 				<input type="checkbox" name="hobby" id="hobby2" value="2"><label for="hobby2">跳舞</label>
	 				<input type="checkbox" name="hobby" id="hobby3" value="3"><label for="hobby3">跑步</label>
	 				<input type="checkbox" name="hobby" id="hobby4" value="4"><label for="hobby4">下棋</label>
	 				<input type="checkbox" name="hobby" id="hobby5" value="5"><label for="hobby5">画画</label>
	 				<input type="checkbox" name="hobby" id="hobby6" value="6"><label for="hobby6">书法</label>
 				</span>
 				<span class='tip tip-default'></span>
 			</div>
 			<div class="fm-item">
 				<input type="submit" value="提交" id="submit">
 			</div>
 		</form>
	</div>
	<script src="js/number.js"></script>
	<script src="http://webfuture.cn/xhcms_2014/js/data/area.js"></script>
	<script src="js/idcard.js"></script>
	<script type="text/javascript">

		/** 应用中需要重写settings：通过识别errorInfo这个字符串是否为"" 决定验证成功与否 */
		jQuery.form.settings = {
			/**提示标签初始化: input{jQuery}:待处理标签, defaultTip:对应的默认提示*/
			initTip:function(input,defaultTip){
				input.nextAll('.tip').text(defaultTip || "");
			},
			
			/**默认的出错提示方案: input{jQuery}:待处理标签, errorInfo: 验证结果*/
			validTip : function(input,errorInfo, defaultTip){
				if(errorInfo){
					// alert( errorInfo );
					for(var i=0; i<10; i+=2)input.animate({marginLeft:10-i,marginRight:i-10},20).animate({marginLeft:0,marginRight:0},20);
					input.next().removeClass('tip-default').addClass("tip-error").text(errorInfo);
				}else{
					input.next().removeClass('tip-error').addClass("tip-default").text(defaultTip || "");
				}
			}
	
		};

		jQuery.extend( jQuery.form.regValids, {
			name: /^[\u4e00-\u9fa5]{2,3}$/,
			/**一般情况下接收正则表达式对象*/
			cardNum: /(^\d{15}$)|(^\d{17}(\d|X)$)/i,
			
			/**function 类型的Valid返回值必须为正则,v表示绑定参数实体*/
			date : function(v){
				var format = v.dateFormat || "yyyy-MM-dd";
				var regStr =  "^" + format.replace(/\s/g,"\\s")
						           .replace("yyyy", "[0-9]{4}")
						           .replace("MM","([0]?[1-9]|[1][0-2])")
						           .replace("dd","([0-2]?[0-9]|[3][0-1])")
						           .replace("hh","([0][1-9]|[1][0-2])")
						           .replace("HH","([0-1][0-9]|[2][0-3])")
						           .replace("mm", "[0-5][0-9]")
								   .replace("ss", "[0-5][0-9]")
								   .replace("SS","[0-9]{1,3}") + "$";
				return new RegExp(regStr);
			}

		});
		// console.log( jQuery.form.regValids );

		var renderCfg = {
			".hobby-holder":{
				option: "click",
				begin: function(input){
					return input.children(":checked");
				},
				minlen: 2,
				maxlen: 4,
				lenTip: "必须选择2~4项！"
			},
			"#name":{
				option:'change',
				type: "name",
				errorTip: "请输入2~3个汉字",
				requiredTip:'姓名需要填写'
			},
			"#idCard":{
				option: "blur",
				type: "IdCard",
				success: function(input, validReturn){
					console.log( validReturn );
				}
			},
			"#birth":{
				option: "blur",
				type: "date",
				dateFormat: "yyyy年MM月dd日",
				validFun: function(value, input){
					console.log( value );
					return {errorInfo: "就是不对！"};
				}
			},
			"#info":{
				required:false
			}
		};

		// alert( renderCfg["#amount"]["option"] );

		jQuery.form.render(renderCfg,{
			required: true,
			requiredTip: "需要填写的哦！"
		});
		jQuery("#form0").submit(function(){
			return jQuery(this).formValid(null,{
				interrupt:true
			});
		});
	</script>



</body>
</html>